<!DOCTYPE html>

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>指令</title>
    <style type="text/css">
        /* attribute selector (属性选择器) */
        [v-cloak] {
            display: none ;
        }
    </style>
</head>
<body>

    <h3>指令: v-cloak</h3>

    <div id="root">
        <input type="text" v-model="username" >
        <p v-cloak>{{ username }}</p>
    </div>

    <script src="vue.global.js"></script>

    <script>
        setTimeout( function(){
            const app = Vue.createApp({
                data(){
                    return {
                        username: 'hello'
                    }
                }
            });
            const instance = app.mount('#root');
            console.log(instance);
        } , 10000 );
    </script>
    
</body>
</html>